<template>
  <van-notice-bar
    left-icon="user"
    scrollable
    color="white"
    background="#000000"
  >
    根据《互联网论坛服务社区管理规定》要求，用户必须进行身份认证才能发布信息。提交的信息会在24小时内审核，请耐心等待。
  </van-notice-bar>
  <van-form @submit="onSubmit">
    <van-cell-group inset>
      <van-field
        v-model="name"
        name="姓名"
        label="姓名"
        placeholder="姓名"
        required
        label-align="top"
        maxlength="10"
        :rules="[{ required: true, message: '请填写姓名' }]"
      />
      <van-field
        v-model="stunum"
        name="学号"
        label="学号"
        placeholder="学号"
        required
        label-align="top"
        maxlength="20"
        :rules="[{ required: true, message: '请填写学号' }]"
      />
      <van-field
        v-model="grade"
        name="入学年份"
        label="入学年份"
        placeholder="入学年份"
        required
        label-align="top"
        maxlength="10"
        :rules="[{ required: true, message: '请填写入学年份' }]"
      />
      <van-field
        v-model="academic"
        name="学院"
        label="学院"
        placeholder="学院"
        required
        label-align="top"
        maxlength="20"
        :rules="[{ required: true, message: '请填写学院' }]"
      />
      <van-field name="radio" label="单选框" required label-align="top">
        <template #input>
          <van-radio-group
            v-model="checked"
            direction="horizontal"
            checked-color="#000000"
          >
            <van-radio name="男">男</van-radio>
            <van-radio name="女">女</van-radio>
          </van-radio-group>
        </template>
      </van-field>
      <van-field name="uploader" label="学生证上传" required label-align="top">
        <template #input>
          <van-uploader v-model="value" max-count="1" max-size="1024*1024" />
        </template>
      </van-field>
      <van-cell>
        <p style="text-align: left">
          1.请上传清晰的学生卡(证)信息，包含姓名学号等信息
        </p>
        <p style="text-align: left">
          2.一个证件只能认证一个账号，冒用他人证件 将会被追究法律责任
        </p>
        <p style="text-align: left">
          提交的申请会在1个工作日内审核，请耐心等待(>_&lt;)!!
        </p>
      </van-cell>
    </van-cell-group>
    <div style="margin: 16px">
      <van-button
        round
        block
        type="primary"
        color="linear-gradient(to right, #a9a9a9, #333333)"
        native-type="submit"
      >
        提交
      </van-button>
    </div>
  </van-form>
</template>

<script>
import { ref } from "vue";
import MyAxios from "@/plugins/MyAxios";
import { showLoadingToast, showNotify, showToast } from "vant";
import router from "@/router";

export default {
  setup() {
    MyAxios.get("/authuser/findAuthInfo").then((res) => {
      const { code, data } = res;
      if (code === 0) {
        if (data === 1) {
          showToast(
            { type: "warning", message: "您已经认证过了", forbidClick: true },
            2000
          );
        } else if (data === 0) {
          showToast(
            { type: "success", message: "认证信息正在审核", forbidClick: true },
            2000
          );
        }
        setTimeout(() => {
          router.back();
        }, 2000);
      }
    });
    const name = ref("");
    const stunum = ref("");
    const grade = ref("");
    const academic = ref("");
    const checked = ref("男");
    const value = ref([]);

    let isSubmitting = false; // 添加一个状态标记，防止重复提交
    const onSubmit = () => {
      if (isSubmitting) return; // 如果正在提交，则直接返回

      isSubmitting = true; // 设置提交状态为true，禁用按钮

      const toast1 = showLoadingToast({
        message: "提交中...",
        forbidClick: true,
      });
      let formData = new FormData();
      formData.append("name", name.value);
      formData.append("stunum", stunum.value);
      formData.append("grade", grade.value);
      formData.append("academic", academic.value);
      formData.append("gender", checked.value);
      formData.append("file", value.value[0].file);

      setTimeout(() => {
        MyAxios.post("/authuser/addAuthInfo", formData).then((res) => {
          const { code } = res;
          toast1.close();
          if (code === 0) {
            showNotify({ type: "success", message: "认证信息提交成功" }, 2000);
            router.push({ path: "/user" });
          } else {
            showNotify({ type: "danger", message: "认证信息提交失败" }, 2000);
          }
          formData = new FormData();
          isSubmitting = false; // 请求完成后恢复提交状态为false，启用按钮
        });
      }, 500);
    };
    return {
      name,
      stunum,
      grade,
      academic,
      checked,
      value,
      onSubmit,
    };
  },
};
</script>

<style scoped></style>
